import React from "react";
import { Carousel, Folder, Stack } from "./../Animation";
import classNames from "classnames";
import { useIsMobile } from "@/hooks/use-mobile";

interface AboutBoxProps {
  className?: string;
  index: number;
  leftNode: React.ReactNode;
  rightNode: React.ReactNode;
}

const AboutBox = (props: AboutBoxProps) => {
  const { className = "", index, leftNode, rightNode } = props;
  return (
    <div
      className={classNames(
        "w-[70vw] flex md:flex-row flex-col items-center justify-center mb-30 md:mb-60",
        className
      )}
    >
      <div className="md:mr-16">
        <div
          className="text-7xl mb-10 text-[transparnt]"
          style={{ fontFamily: "eng" }}
        >
          0{index}
        </div>
        {leftNode}
      </div>
      <div className="flex items-center justify-center">{rightNode}</div>
    </div>
  );
};

export default AboutBox;
